<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/zTreeStyle.css">
    <link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
    <script type="text/javascript" src="js/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>


</head>

<body class="easyui-layout">
    <!--头部-->
    <div data-options="region:'north',title:'North Title',collapsible:false" style="height:100px;">
        <div>
            <div style="width: 300px;margin: 5px auto; padding: 20px;">
                hello<span id="user_username"  style="font-weight: bold;font-size: 20px;padding: 5px"></span>欢迎您！
            </div>
        </div>
    </div>
    <!--左边-->
    <div data-options="region:'west',title:'West'" style="width:200px;">
        <div id="menu">
            <ul>
                <li><a href="#" rel="page/user/user.html" title="user">用户管理</a>
                <li><a href="#" rel="page/commodity/commodity.html" title="commodity">商品管理</a>
                <li><a href="#" rel="page/loveWall/loveWall.html" title="wall">告白墙管理</a>
                <li><a href="#" rel="page/audit/audit.html" title="audit">审核管理</a>
                <li><a href="#" rel="page/partjob/partjob.html" title="partjob">兼职信息管理</a>
                <li><a href="#" rel="page/discounts/discounts.html" title="discounts">商家优惠活动管理</a>
            </ul>
        </div>
    </div>
    <!--中间-->
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
        <div id="tt" class="easyui-tabs" data-options="fit:true">
            <div title="系统缺省页面" style="padding:10px;">
                此处以后显示相应的系统信息（当前操作系统的类型，当前项目的域名，硬件的相关配置或者显示报表
            </div>

        </div>
    </div>
</body>
<script type="text/javascript">
    //接收login传过来的用户名
    $(function () {
        GetQueryString("name");
    });
    function GetQueryString(parameter) {
        var reg = new RegExp("(^|&)" + parameter + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            if (parameter == "name") {
                //alert(decodeURI(r[2]));
                //将用户名显示在index页面上
                $("#user_username").html(decodeURI(r[2]));
            }
        }
    }

    /**
     *左边的的导航如何与右边的内容关联？
     */
    $(function(){
        //1.通过a标签的属性获取a节点对象
        $("a[title]").click(function(){
            //标签内容
            var text = $(this).text();
            //标签属性标题
            var title = $(this).attr("title");
            //链接
            var rel = $(this).attr("rel");
            //判断当前右边是否已有相应的tab,如果不判断？导航会重复出现
            if($("#tt").tabs("exists", text)) {
                $("#tt").tabs("select", text);
            } else {
                //2.创建左边导航栏对应的中间区域用$.tabs()
                $("#tt").tabs("add",{
                    title:text,
                    closable:true,// 点击可以关闭中间导航的菜单
                    href:rel  // 3.rel是点击左边菜单栏对应的显示页面
                });
            }
        });
    });

</script>

</html>